<%--
  Created by IntelliJ IDEA.
  User: 26405
  Date: 2023/9/26
  Time: 14:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色管理</title>
    <link rel="stylesheet" href="../../static/css/element-ui.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element_index.js"></script>
</head>
<body>
<div id="app">
    <%--顶部新增、刷新按钮--%>
    <el-button type="primary" @click="insertVisible = true">新增角色</el-button>
    <el-button type="success" @click="inittable">刷新表格</el-button>
    <%--角色表格内容--%>
    <el-table
            :data="tableData"
            style="width: 100%"
            :cell-style="{'text-align':'center'}"
            :header-cell-style="{'text-align':'center'}"
            :border="true">
        <el-table-column
                prop="roleid"
                show-overflow-tooltip
                label="ID">
        </el-table-column>
        <el-table-column
                prop="rolename"
                show-overflow-tooltip
                label="角色名">
        </el-table-column>
        <el-table-column
                prop="remark"
                show-overflow-tooltip
                label="角色描述">
        </el-table-column>
        <el-table-column
                fixed="right"
                prop="status"
                label="状态"
        >
            <template slot-scope="scope">
                <el-tag
                        v-if="scope.row.status === '禁用'"
                        type="info"
                        disable-transitions>禁用
                </el-tag>
                <el-tag
                        v-else="scope.row.status === '启用'"
                        type="success"
                        disable-transitions>启用
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="200">
            <template v-if="staffInfo.staffid === 111" slot-scope="scope">
                <el-button @click="roleEditor(scope.row)" type="primary" icon="el-icon-edit" circle
                           size="small"></el-button>
                <el-button @click="roleDel(scope.row)" type="danger" icon="el-icon-delete" circle
                           size="small"></el-button>
                <el-button type="warning" @click="editPermission(scope.row.roleid)" round size="small">修改权限
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <%--新增角色框--%>
    <el-dialog
            title="添加角色"
            :visible.sync="insertVisible"
            width="40%">
        <el-form ref="insertForm" :model="insertForm" label-width="80px">
            <el-form-item
                    label="角色名"
                    prop="rolename"
                    :rules="{required: true, message: '角色名不能为空', trigger: 'blur'}">
                <el-input v-model="insertForm.rolename" placeholder="请输入角色名"></el-input>
            </el-form-item>
            <el-form-item
                    label="角色描述"
                    prop="remark"
                    :rules="{required: true, message: '角色描述不能为空', trigger: 'blur'}">
                <el-input v-model="insertForm.remark" placeholder="请输入角色描述"></el-input>
            </el-form-item>
            <el-form-item
                    label="角色状态"
                    prop="status"
                    :rules="{required: true, message: '请选择状态', trigger: 'blur'}">
                <el-select v-model="insertForm.status" placeholder="--请选择--">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="insertConfirm('insertForm')">确 定</el-button>
    <el-button @click="insertForm={}">重 置</el-button>

  </span>
    </el-dialog>
    <%--修改角色框--%>
    <el-dialog
            title="修改角色"
            :visible.sync="editVisible"
            width="40%">
        <el-form ref="form" :model="editForm" label-width="80px">
            <el-form-item label="角色名">
                <el-input v-model="editForm.rolename" placeholder="请输入角色名"></el-input>
            </el-form-item>
            <el-form-item label="角色描述">
                <el-input v-model="editForm.remark" placeholder="请输入角色描述"></el-input>
            </el-form-item>
            <el-form-item label="角色状态">
                <el-select v-model="editForm.status" placeholder="--请选择--">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="editConfirm">确 定</el-button>
    <el-button @click="editForm={}">重 置</el-button>

  </span>
    </el-dialog>
    <%--修改权限的弹出框--%>
    <el-dialog
            title="修改权限"
            :visible.sync="permissionVisible"
            width="30%"
    >
        <%--:data表示树形数据
        show-checkbox:显示复选框
        node-key: 节点的key---id
         :default-expanded-keys默认展开的节点
         :default-checked-keys默认选中的节点
         ref
         --%>
        <el-tree
                :data="treeData"
                show-checkbox
                node-key="mid"
                ref="rootTree"
                :props="defaultProps">
        </el-tree>
        <span slot="footer" class="dialog-footer">
            <el-button @click="permissionVisible = false">取 消</el-button>
            <el-button type="primary" @click="permissionConfirm">确 定</el-button>
          </span>
    </el-dialog>
    <!--分页组件：
                @size-change:触发 改变每页显示的记录条数
                @current-change: 改变页码时触发的函数
                current-page: 显示的当前页面
                page-sizes: 页面大小的下拉框
                page-size: 默认每页显示的条数
                total: 总条数
           -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            //修改权限框
            treeData: [],
            //lable==>修改框默认显示菜单名称（mname/mid）
            defaultProps: {
                children: 'children',
                label: 'mname'
            },
            //修改框默认被选中菜单id
            defaultChecked: [],
            //被修改的角色id
            roleId: undefined,
            //表格内容
            tableData: [],
            //当前页码
            currentPage: 1,
            //每页默认条数
            pageSize: 5,
            //总条数
            total: 0,
            //控制新增对话框显示与隐藏
            insertVisible: false,
            //添加表单对象
            insertForm: {},
            //控制修改对话框显示与隐藏
            editVisible: false,
            //修改对话框的表格对象
            editForm: {},
            //修改权限对话框
            permissionVisible: false,
            //被修改权限的角色id
            roleId: undefined,
            //用户信息
            staffInfo: {},


        },
        created() {
            this.inittable();
            this.initStaffInfo();
        },
        methods: {
            /*获取登录信息*/
            initStaffInfo() {
                axios.get('/staff/info1').then(res => {
                    console.log(res)
                    this.staffInfo = res.data.data;
                })
            },
            /*
              表格格式化
             */
            inittable() {
                let self = this;
                axios.post("/role?currentPage=" + this.currentPage + '&pageSize=' + this.pageSize).then(function (resp) {
                    console.log(resp)
                    self.tableData = resp.data.rows
                    self.total = resp.data.total
                })
            },
            /*
           改变页面大小函数
            */
            handleSizeChange(val) {
                this.pageSize = val;
                this.inittable();
            },
            /*
            改变显示页码的函数
             */
            handleCurrentChange(val) {
                this.currentPage = val;
                this.inittable();
            },
            /*
            添加角色框确认按钮方法
             */
            insertConfirm(insertForm) {
                //通过validate 判断所填内容是否为空
                this.$refs[insertForm].validate((valid) => {
                    if (valid) {
                        let self = this;
                        axios.post("/role/insert", this.insertForm).then(function (resp) {
                            if (resp.data === 1) {
                                //提示信息
                                self.$message({
                                    showClose: true,
                                    message: '添加成功',
                                    type: 'success'
                                });
                                //重新刷新页面
                                self.inittable();
                            }
                            //关闭修改对话框
                            self.insertVisible = false;
                            self.insertForm = {}
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            /*
            删除角色按钮方法
             */
            roleDel(row) {
                let self = this;
                self.$confirm('是否确定删除?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("/role/delete", row).then(function (resp) {
                        if (resp.data === 1) {
                            //刷新页面
                            self.inittable();
                            //删除成功提示信息
                            self.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                }).catch(() => {
                    //取消删除提示信息
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            /*
            修改角色按钮方法
             */
            roleEditor(row) {
                this.editForm = row;
                console.log(row)
                this.editVisible = true;
            },
            /*
            修改确认方法
             */
            editConfirm() {
                let self = this;
                axios.post("/role/update", this.editForm).then(function (resp) {
                    if (resp.data === 1) {
                        //提示信息
                        self.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });

                        //关闭修改对话框
                        self.editVisible = false;
                        //重新刷新页面
                        self.inittable();
                    }
                })
            },
            /*
            修改权限按钮方法
             */

            editPermission(roleid) {
                //将获取的角色id（roleId）传递给全局的【被修改权限的角色id】（roleId）
                let self = this;
                self.roleId = roleid;
                //获取树形数据,及当前角色具有的权限id
                axios.post("/menu/list?roleid=" + roleid).then(function (resp) {
                    //获取树形数据
                    self.treeData = resp.data.data.fatherlist;
                    //默认选中 根据角色id获取具有的菜单选项
                    setTimeout(() => {
                        resp.data.data.mids.forEach(value => {
                            self.$refs.rootTree.setChecked(value, true, false);
                        })
                    }, 100)
                })
                this.permissionVisible = true;
            },
            /*
            修改权限确认按钮 ===>分配角色权限
             */
            //传递角色id 选中的节点id(通过element===>获取key===>)
            permissionConfirm() {
                //获取全选的id
                var checkedKeys = this.$refs.rootTree.getCheckedKeys();
                //获取半选的id
                var halfCheckedKeys = this.$refs.rootTree.getHalfCheckedKeys();
                //将半选的id添加到全选的id中
                var ids = checkedKeys.concat(halfCheckedKeys);
                let self = this;
                axios.post("/menu/modify?roleId=" + this.roleId + "&ids=" + ids).then(function (resp) {
                    console.log(resp)
                    if (resp.data.data === 1) {
                        //提示信息
                        self.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });

                    }

                })
                this.permissionVisible = false;
            }
        }
    })
</script>
</body>
</html>
